<template>
  <footer class="footer">
    <router-link tag="figure" to="/" @click="a">
      <i  class="iconfont icon-waimai"></i>
      <figcaption>外卖</figcaption>
    </router-link>
    <router-link tag="figure" to="/faxian">
      <i class="iconfont icon-zhinanzhen1"></i>
      <figcaption>发现</figcaption>
    </router-link>
    <router-link tag="figure" to="/dingdan">
      <i class="iconfont icon-icon-1"></i>
      <figcaption>订单</figcaption>
    </router-link>
    <router-link tag="figure" to="/wode">
      <i class="iconfont icon-wode"></i>
      <figcaption>我的</figcaption>
    </router-link>
  </footer>
</template>

<script>
export default {
  name: "app",
  data : function ( ) {
    return {
      show : true,

    }
  },
  methods : {
    a (){
      this.show = !show
      
    }
  }
}
</script>

<style scoped lang="less">
  .footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
    display: flex;
    z-index: 9;
    background: white;
    box-shadow: 0 -5px 5px #ccc;
    figure{
      flex: 1;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      i{
        width: 30px;
        height: 30px;
        font-size: 30px;
        text-align: center;
      }
      figcaption{
        font-size: 12px;
      }
    }
  }
</style>
